<template>
  <div class="dianjichakan">
    <el-dialog title="多个商品编码" :visible.sync="duoxuanlog2" :close-on-click-modal="false" width="1200px">
      <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
        <el-input v-model="search_pages_id" @input='search_pages_ids' style=" width: 280px;"></el-input>
        <el-button type="primary" size="small" @click="idsquanxuan">全选</el-button>
      </div>
      <el-checkbox-group v-model="pages_ids">
        <el-checkbox v-for="item in allprolist3" :key="item.id" :label="item.id">{{item.fetch_code}}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="faguoqu">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: 'dianjichakan',
    props: ['id'],
    data() {
      return {
        duoxuanlog2: false,
        allprolist3: [],
        allprolist2: [],
        search_pages_id: "",
        pages_ids: [],
        t: ""
      };
    },
    created() {
      //获取所有产品
      this.allprolist3 = JSON.parse(localStorage.getItem('allproducts'))
      this.allprolist2 = JSON.parse(localStorage.getItem('allproducts'))
      // axios.get("/api/gth/order-pages?_page_size=2000")
      //   .then(response => {
      //     if (response.data.msg.code == 0) {
      //       this.allprolist3 = response.data.data.data
      //       this.allprolist2 = response.data.data.data
      //     }
      //   })

    },
    mounted() {

    },
    methods: {
      idsquanxuan: function() {
        this.allprolist3.filter(item => {
          if (!this.pages_ids.includes(item.id)) {
            this.pages_ids.push(item.id)
          }
        })
      },
      faguoqu: function() {
        this.$emit('bianmaquanxuanscp', this.pages_ids)
        this.$nextTick(() => {
          this.duoxuanlog2 = false
        })
      },
      search_pages_ids: function() {
        this.allprolist3 = this.allprolist2.filter(item => {
          return item.fetch_code.includes(this.search_pages_id)
        })
      }

    }
  };
</script>

<style lang="scss" scoped>
  .dianjichakan {}
</style>
